// accordions

body.caerp .collapsible {
	position: relative;

	.collapse_title {
		&.title {
			>a {
				border: 0 none;
				margin-left: var(--negative-padding-s);
				padding: 0;
			}
		}

		>a {
			all: inherit;
			color: var(--text-color);
			cursor: pointer;
			text-decoration: none;

			&:hover,
			&:focus,
			&:active {
				box-shadow: none;
				color: var(--collapsible-title-color);

				>svg,
				svg.arrow {
					fill: var(--form-icon-button-hover-color);
				}
			}

			svg.arrow {
				fill: var(--form-main-button-background-color);
				margin-left: var(--padding-s);
				vertical-align: text-bottom;
			}

			svg.icon {
				fill: var(--icon-neutral-color);
			}

			.icon {
				margin: 0 var(--padding-s);
				vertical-align: text-top;
			}

			+ small {
				display: inline-block;
				font-size: .75em;
				line-height: 1.25;
				padding-left: 0;

				em {
					font-size: .875em;
				}
			}
		}

		&[aria-expanded="true"],
		*[aria-expanded="true"] {
			.icon.folder {
				display: none;
			}

			.icon.folder-open {
				display: inline-block;
			}

			svg.arrow {
				transform: rotate(180deg);
			}

			svg.plus {
				display: none;
			}

			svg.minus {
				display: inline;
			}
		}

		&[aria-expanded="false"],
		*[aria-expanded="false"] {
			.icon.folder {
				display: inline-block;
			}

			.icon.folder-open {
				display: none;
			}

			svg.arrow {
				transform: rotate(0deg);
			}

			svg.plus {
				display: inline;
			}

			svg.minus {
				display: none;
			}
		}

		.help_text {
			display: inline-block;

			small {
				font-size: 1rem;
				font-weight: normal;
			}

			a {
				color: var(--text-color);
				font-size: 1rem;
				padding-left: var(--padding-m);
				text-decoration: none;

				svg {
					fill: var(--svg-fill-color);
					vertical-align: -.1em;
				}

				&:hover,
				&:focus,
				&:active {
					svg {
						fill: var(--form-icon-button-hover-color);
					}
				}
			}
		}
	}

	.collapse_content {
		padding-left: var(--padding-3xl);

		.collapse>div:not(:empty) {
			padding: var(--padding-s) var(--padding-s) var(--padding-s) 0;
		}

		>div {
			padding-top: var(--padding-s);
		}

		h4 {
			padding: var(--padding-s) 0;
		}
	}

	&.separate_block {
		&.border_left_block .title {
			padding-left: 0;
		}

		.collapse_title>a.separate_bottom {
			border-bottom: 1px solid var(--border-trans-color);
			padding: var(--padding-s) 0;
		}
	}

	&.separate_bottom {
		padding-bottom: var(--padding-s);
	}

	.collapse_title_buttons {
		display: flex;
		right: 0;
		padding: 0;
		position: absolute;
		top: 2px;
		z-index: $contentLayer;

		button.icon.only,
		a.icon.only {
			margin-left: var(--padding-s);
			padding: var(--padding-s);
			position: static;
		}
	}

	a.collapse_button {

		&:hover,
		&:focus,
		&:active {
			color: var(--link-color);
			text-decoration: none;

			svg {
				fill: var(--link-color);
			}
		}

		svg {
			fill: var(--text-color);
			margin: 0 var(--padding-xs);
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp .collapsible {
		.collapse_content {
			padding-left: var(--padding-xl);
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .collapsible {
		.collapse_content {
			padding-left: var(--padding-m);
		}
	}
}